<template>
  <div class="d-flex TTitle">
    <v-img max-width="61" src="./img/圆形.png"/>
    <v-img class="pl-5" max-width="322" src="./img/不规则长方形.png"/>
    <div>
      <v-img v-if="icon" class="icon" max-width="20" :src="`${require('./img/icon/'+icon+'.png')}`"/>
      <span v-if="title" class="title" :style="{top: count ? icon ? '-11px' :  '9px' : icon ? '-6px' :  '14px'}">{{title}}</span>
      <span v-if="count" class="count" :style="{right: `${countLeft(title, count)}rem`, top: icon ? '-10px' : '10px'}">{{count}}</span>
    </div>
  </div>
</template>
<script>
/**
 * t-title 标题组件
 *
 * 参数
 * String title 标题文本 默认 空
 * String icon  图标形状 默认 空
 * Number count 显示数量 默认 空
 *
 */
export default {
  doc: {
    name: 'T标题组件',
    desc: `用于页面中每块区域中的小标题; icon: stretch、screenshot、page_max、close_all 所有选项到组件 /img/icon 查看`
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: ""
    },
    count: {
      type: Number,
      default: undefined,
    },
  },
  computed: {
    countLeft() {
      return (title, count) => {
        // 数字初始位置
        let res = 1.5
        let titleLenArr = this.getByteLen(title)
        let countLenArr = this.getByteLen(count + '')
        // 标题长度自增
        res += (titleLenArr[0] * 1.27) + (titleLenArr[1] * 0.72)
        // 数字长度自增
        res += (countLenArr[0] * 1.27) + (countLenArr[1] * 0.9)
        return res
      }
    }
  },
  methods: {
    getByteLen(val) {
      let res = [0,0]
      for (var i = 0; i < val.length; i++) {
        var a = val.charAt(i);
        // eslint-disable-next-line no-control-regex
        if (a.match(/[^\x00-\xff]/ig) != null) {
          res[0] = res[0] + 1
        }
        else {
          res[1] = res[1] + 1
        }
      }
      return res;
    }
  }
};
</script>
<style scoped>
.icon{
  position: relative;
  top: 20px;
  left: -362px;
}
.title{
  color:#ffffff;
  font-size:1.9rem;
  position: relative;
  left: -290px;
}
.count{
  color:#ffffff;
  font-size:1.6rem;
  position: relative;
}
</style>